<template>
  <div id="trainingView">
    <GoBack :content="'详细信息'" @click="goBackPage"></GoBack>
    <div class="bodyContent">
      <div class="totalDiv">
        <div class="topDiv">
          <el-scrollbar style="height: 100%">
            <vxe-toolbar perfect>
              <template #buttons>
                <el-tag size="large" type="primary">{{ statusContent }}</el-tag>
                <vxe-button v-if="showButton" type="text" class="button-blue" icon="vxe-icon-success-circle-fill" content="签到" @click="signIn(1)"></vxe-button>
                <vxe-button v-if="showButton" type="text" class="button-red" icon="vxe-icon-error-circle" content="拒绝" @click="signIn(2)"></vxe-button>
              </template>
            </vxe-toolbar>

            <div class="bodyTitle">{{ trainingObject.trainingName }}</div>

            <div class="bodyAll">
              <el-descriptions class="margin-top" :column="3" border>
                <el-descriptions-item label-align="right" label-class-name="my-label" class-name="my-content">
                  <template #label>
                    <div class="cell-item">培训编码</div>
                  </template>
                  {{ trainingObject.trainingCode }}
                </el-descriptions-item>

                <el-descriptions-item label-align="right" label-class-name="my-label" class-name="my-content">
                  <template #label>
                    <div class="cell-item">培训地点</div>
                  </template>
                  {{ trainingObject.address }}
                </el-descriptions-item>

                <el-descriptions-item label-align="right" label-class-name="my-label" class-name="my-content">
                  <template #label>
                    <div class="cell-item">培训时间</div>
                  </template>
                  {{ trainingObject.trainingDate }}
                </el-descriptions-item>

                <el-descriptions-item label-align="right" label-class-name="my-label" class-name="my-content">
                  <template #label>
                    <div class="cell-item">主持人</div>
                  </template>
                  {{ trainingObject.hostName }}
                </el-descriptions-item>

                <el-descriptions-item label-align="right" label-class-name="my-label" class-name="my-content">
                  <template #label>
                    <div class="cell-item">培训方式</div>
                  </template>
                  {{ formatterType(trainingObject.trainingType) }}
                </el-descriptions-item>

                <el-descriptions-item label-align="right" label-class-name="my-label" class-name="my-content">
                  <template #label>
                    <div class="cell-item">培训结束时间</div>
                  </template>
                  {{ trainingObject.endDate }}
                </el-descriptions-item>

                <el-descriptions-item label-align="right" label-class-name="my-label" class-name="my-content">
                  <template #label>
                    <div class="cell-item">记录人</div>
                  </template>
                  {{ trainingObject.recorderName }}
                </el-descriptions-item>
              </el-descriptions>

              <el-descriptions class="buttomDescriptions" :column="1" border>
                <el-descriptions-item label-align="right" label-class-name="my-label" class-name="my-content">
                  <template #label>
                    <div class="cell-item1">参与人员</div>
                  </template>
                  <div v-for="item in trainingObject.sysUserList" :key="item.id" style="display: inline-block">
                    <el-tag size="small">{{ item.realname }}</el-tag>
                  </div>
                </el-descriptions-item>

                <el-descriptions-item label-align="right" label-class-name="my-label" class-name="my-content">
                  <template #label>
                    <div class="cell-item1">培训内容</div>
                  </template>
                  <el-scrollbar>
                    <div class="selectable">
                      {{ trainingObject.trainingContent }}
                    </div>
                  </el-scrollbar>
                </el-descriptions-item>

                <el-descriptions-item label-align="right" label-class-name="my-label" class-name="my-content">
                  <template #label>
                    <div class="cell-item1">培训目标</div>
                  </template>
                  <el-scrollbar>
                    <div class="selectable">
                      {{ trainingObject.target }}
                    </div>
                  </el-scrollbar>
                </el-descriptions-item>

                <el-descriptions-item label-align="right" label-class-name="my-label" class-name="my-content">
                  <template #label>
                    <div class="cell-item1">备注</div>
                  </template>
                  <el-scrollbar>
                    <div class="selectable">
                      {{ trainingObject.remake }}
                    </div>
                  </el-scrollbar>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-scrollbar>
          <vxe-modal v-model="showModal" title="知识详情" width="1500" @close="closeModel()" height="900" show-zoom fullscreen>
            <template #default>
              <div class="bodysTop">
                <div class="headerTitle">
                  <span>{{ contentObject.title }}</span>
                  <vxe-button type="text" class="button-red"  content="关闭弹框" @click="closeModel"></vxe-button>
                </div>
                <p v-html="contentObject.content"></p>
              </div>
            </template>
          </vxe-modal>
        </div>
        <div class="footerDiv">
          <el-card>
            <el-scrollbar>
              <div class="footerTitle">相关知识：</div>
              <div class="footerContent">
                <div v-for="item in trainingObject.knowledgeList" :key="item.id">
                  <span v-if="linkContent">
                    <div>
                      <span style="margin-right: 10px;width: 80px;display: inline-block;cursor: pointer;" :style="alreadyLook === true ? 'color: blue;' : 'color: #000;'"  @click="getContentInfo(item.id)">{{ item.title }} </span>
                      <span>({{ sumCount(item.durationList) }})</span>
                    </div>
                  </span>
                  <span v-else> {{ item.title }} {{ sumCount(item.durationList) }}</span>
                </div>
              </div>
            </el-scrollbar>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息
import { AppStore } from '@/stores/store';
import GoBack from '@/components/GoBack.vue'; //返回组件
import { formatDateTime } from '../../../utils/common';

let store = AppStore();
let userId = store.userInfo.id;
let { proxy }: any = getCurrentInstance();
const trainingObject = reactive({});
let trainingId = ref('');
const typeOptions = reactive([
  {
    name: '线下培训',
    value: 0
  },
  {
    name: '线上培训',
    value: 1
  }
]);
let linkContent = ref(false);
let showButton = ref(false);
let statusContent = ref('');
let showModal = ref(false);//相关知识 点击标题弹框打开状态
let contentObject = reactive({
  id: '',
  knowledgeId: '',
  catalogId: '',
  orgId: '',
  title: '',
  content: '',
  seq: 0,
  wkKnowledgeIssueList: []
});
let startDate = ref(null);
let curContentId = ref('');
let alreadyLook = ref(false)//查看标志

// 方法定义区 =============================================================
onMounted(() => {
  trainingId.value = proxy.$route.query.param1;
  // userId = store.userInfo.id;
  getTrainingInfo(trainingId);
  alreadyLook.value = false;//重置查看标志
});

// 获取人员列表
function getTrainingInfo(trainingId: any) {
  const url = '/wk/training/plan/getTrainingInfo/' + trainingId.value + '/' + userId;
  proxy.$http
    .get(url)
    .then((res: any) => {
      if (res.data) {
        Object.assign(trainingObject, res.data);
        proxy.$nextTick(() => {
          if (trainingObject.sysUserList && trainingObject.sysUserList.length > 0) {
            let obj = trainingObject.sysUserList.find((item) => item.id === userId);
            showButton.value = obj.differ === 0 ? true : false;
            statusContent.value = obj.differ === 0 ? '未签到' : obj.differ === 1 ? '已签到' : '已拒绝';
          }
          let endDate = trainingObject.endDate;
          linkContent.value = new Date(endDate) >= new Date();
        });
      }
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

// 签到状态修改
function signIn(value: any) {
  const url = '/wk/training/user/updateSignStatusByUserId';
  proxy.$http
    .post(url, { userId: userId, trainingId: trainingId.value, value: value })
    .then((res: any) => {
      if (res.status.code === 1) {
        VxeMessage(res.status.msg, VxeNotifyType.success);
        getTrainingInfo(trainingId);
      } else {
        VxeMessage(res.status.msg, VxeNotifyType.error);
      }
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

// 格式化 培训方式(根据数字匹配 返回名字)
function formatterType(cellValue) {
  const item = typeOptions.find((item) => item.value === cellValue);
  return item ? item.name : '';
}

// 格式化统计数量
function sumCount(durationList) {
  let sumCount = durationList.map((item) => item.duration).reduce((a, b) => a + b, 0);
  if(sumCount > 0){
    alreadyLook.value = true; //内容查看总时长大于0 就给标识
  }
  let countStr = Math.floor(sumCount / 60000) + '分钟' + (sumCount % 60000) / 1000 + '秒';
  return countStr;
}

//点击返回到上一个页面
function goBackPage() {
  proxy.$router.push({ name: 'traininglist', query: { id: proxy.$route.query.param1, tabNum: proxy.$route.query.param2 } });
}

// 获取内容详情
function getContentInfo(id: any) {
  curContentId.value = id;
  showModal.value = true;
  startDate.value = formatDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss.SSS');
  const url = '/api/wk/wkKnowledgeContent/getContentListById/' + id;
  proxy.$http
    .get(url)
    .then((res: any) => {
      Object.assign(contentObject, res.data);
    })
    .catch((err: any) => {
      VxeMessage('获取内容失败', VxeNotifyType.error);
    });
}

// 关闭保存时间
function closeModel() {
  const url = '/wk/contentView/time/addContentViewTime';
  let obj = {
    userId: userId,
    knowledgeId: '',
    knowledgeContentId: curContentId.value,
    startTime: startDate.value,
    endTime: (startDate.value = formatDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss.SSS'))
  };
  proxy.$http
    .post(url, obj)
    .then((res: any) => {
      // console.log(res.data);
      getTrainingInfo(trainingId);
    })
    .catch((err: any) => {
      VxeMessage('记录时间失败', VxeNotifyType.error);
    });
    showModal.value = false;
}
</script>

<style lang="scss" scoped>
#trainingView {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    .totalDiv {
      height: 100%;
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      .topDiv {
        height: 70%;
        .bodyTitle {
          text-align: center;
          font-weight: 700;
          font-size: 25px;
          margin-bottom: 10px;
        }
        .bodyAll {
          padding: 0 20px;
          :deep(.my-label) {
            font-size: 15px;
            width: 150px;
          }
          :deep(.my-content) {
            font-size: 14px;
          }
        }
        .bodysTop {
          padding: 10px;
          height: calc(100% - 20px);
        }
        .headerTitle {
          text-align: center;
          position: relative;
          span {
            font-size: 20px;
            font-weight: 700;
          }
          .vxe-button {
            position: absolute;
            right: 0;
            top:0
          }
        }
      }
      .footerDiv {
        height: 30%;
        .el-card {
          height: 100%;
          :deep(.el-card__body) {
            padding: 10px 20px;
            height: calc(100% - 20px);
            .footerTitle {
              font-size: 18px;
              font-weight: 700;
            }
            .footerContent {
              div {
                margin: 10px;
                span {
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
